<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入用户ID" size="small" style="width: 200px;" v-model="query.user_id"></el-input>
            <el-input clearable placeholder="请输入关键词" size="small" style="width: 200px;" v-model="query.keyword"></el-input>
            <el-select v-model="query.status" placeholder="请选择状态">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <!-- <el-select v-model="query.verify_status" placeholder="请选择审核类型">
                <el-option v-for="item in verify_statusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->

            <el-select v-model="query.type" placeholder="请选择类型">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-select v-model="query.customized_type" placeholder="请选择定制类型">
                <el-option v-for="item in customized_typeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>


            <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
                value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="start_timeFun">
            </el-date-picker>

            <el-button @click="page = 1; init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page = 1; init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <div v-loading="loading" style="height: 600px;overflow: auto;">
                <div @scroll="loadMoreData" class="scroll-window" v-if="data.length > 0">
                    <el-card :key="index" class="mt-20"
                        style="padding: 20px;border-bottom: #d1d1d1 1px solid;padding-top: 0;"
                        v-for="(item, index) in data">

                        <div style="display: flex;align-items: center;margin-bottom: 10px;">
                            <UserInfo :user_id="item.user_id" :userInfos="item.author" v-if="item.user_id">
                            </UserInfo>
                        </div>


                        <el-row>
                            <el-col :span="6">
                                <div class="flex align-center color333 size14" style="width: 150px;">
                                    <img v-if="item.type == 'customized'" alt src="@/assets/goods/customized.png" srcset
                                        width="20px" />
                                    <img v-else-if="item.type == 'same_city'" alt src="@/assets/goods/same_city.png" srcset
                                        width="20px" />
                                    <img v-else-if="item.type == 'one_by_one'" alt src="@/assets/goods/one_by_one.png"
                                        srcset width="20px" />
                                    <span v-if="item.type == 'customized'" class="pl-4">私人定制</span>
                                    <span v-if="item.type == 'same_city'" class="pl-4">同城空降</span>
                                    <span v-if="item.type == 'one_by_one'" class="pl-4">1V1密聊</span>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="color333 size13">
                                    <span class="vertical-middle">订单编号：{{ item.trade_no | getShortOrder }}</span>
                                    <i @click="copy(item.trade_no)"
                                        class="iconfont icon-fuzhi vertical-middle cursor-pointer color-blue"
                                        style="font-size:20px"></i>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="color333 size13">下单时间：{{ item.created_at }}</div>
                            </el-col>
                            <el-col :span="4">
                                <template>
                                    <el-tag v-if="item.status == 4">已完成</el-tag>
                                    <el-tag v-else-if="item.status == 1" type="success">上架</el-tag>
                                    <el-tag v-else-if="item.status == 5" type="info">取消</el-tag>
                                    <el-tag v-else-if="item.status == 3" type="warning">进行中</el-tag>
                                    <el-tag v-else-if="item.status == 2" type="danger">下架</el-tag>
                                </template>
                            </el-col>
                        </el-row>

                        <div class="box" style="padding: 10px;background-color: #f5f5f5;margin-top: 10px;">
                            <div class="omit1 size14 pb-10" v-if="item.desc">{{ item.desc }}</div>

                            <el-row :gutter="5">
                                <el-col :key="key" :span="2.5" v-for="(value, key) in item.images">
                                    <el-image :preview-src-list="item.images" :src="value" class="radius10" fit="cover"
                                        style="width: 80px; height: 80px"></el-image>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="box" style="padding: 10px;background-color: #f5f5f5;margin-top: 10px;">
                            <div class="omit1 size14 pb-10">服务价格：</div>
                            <el-row :gutter="5">
                                <el-col :key="key" :span="4" v-for="(value, key) in item.package">
                                    {{ value.time + '分钟' + ' ' + value.price + '金币' }}
                                </el-col>
                            </el-row>
                        </div>

                        <el-row class="marginTop20" style="margin-top: 10px;">
                            <el-col :span="13">
                                <div class="color333 size14" style="width: 330px;">
                                    <i class="el-icon-time font-15 color999"></i>
                                    <span class="pl-4">服务时间：{{ item.start_time | getMdHis }} - {{ item.end_time |
                                        getMdHis }}</span>
                                </div>
                            </el-col>

                            <el-col :span="7">
                                <div class="flexSB color333 size14" style="width: 160px;">
                                    <div>
                                        服务价格：
                                        <span class="colorFF8F3E">{{ item.money }}金币</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="flexFS color333 size14" style="width: 100%;margin-top: -5px;">

                                    <el-button size="mini" slot="reference" type="success" style="padding: 10px"
                                        @click="toDetails(item.secret_id)"
                                        v-permission="['ADMIN', 'SECRET_DETAILS']">详情</el-button>

                                    <el-popconfirm v-if="item.status == 1 || item.status == 3"
                                        @confirm="reasonShowFun(item.secret_id)" title="这是确定要下架这个订单吗？">
                                        <el-button size="mini" slot="reference" style="padding: 10px;margin-left: 10px;"
                                            type="danger">下架</el-button>
                                    </el-popconfirm>
                                </div>
                            </el-col>
                        </el-row>

                        <!-- <el-row class="marginTop10" v-if="item.secret.province">
                            <el-col :span="8.5">
                                <div class="flexSB color333 size14">
                                    <i class="el-icon-location-outline size20 color999"></i>
                                    <span>服务地址：{{ item.secret.province }}{{ item.secret.city }}{{ item.secret.area }}</span>
                                </div>
                            </el-col>
                        </el-row> -->
                        <div class="line marginTop10"></div>
                    </el-card>
                </div>
                <div v-else>
                    <el-empty></el-empty>
                </div>
            </div>
        </el-card>


        <!-- 下架订单 -->
        <el-dialog :visible.sync="reasonShow" title="下架订单" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="下架原因">
                    <el-input placeholder="请输入下架原因" style="width: 500px" v-model="reasonForm.reason"
                        type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="reasonShow = false">取 消</el-button>
                <el-button @click="disableFun(2)" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import list from "@/api/bank.json"
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name: "secret-chat-details-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            submitComplete: false,
            times: '',
            query: {
                user_id: null,
                keyword: '',
                status: '',
                customized_type: '',
                type: '',
                verify_status: ''
            },
            value: '',
            reasonShow: false,
            reasonForm: {
                status: '',
                reason: '',  //理由
            },
            secret_id: "",
            options: [
                {
                    value: 1,
                    label: '上架 '
                }, {
                    value: 2,
                    label: '下架'
                }, {
                    value: 3,
                    label: '进行中'
                },
                {
                    value: 4,
                    label: '已完成'
                },
                {
                    value: 5,
                    label: '取消'
                }
            ],

            typeList: [
                {
                    value: 'one_by_one',
                    label: '密聊 '
                }, {
                    value: 'same_city',
                    label: '同城 '
                }, {
                    value: 'customized',
                    label: '定制'
                }
            ],

            customized_typeList: [
                {
                    value: 1,
                    label: '密聊'
                }, {
                    value: 2,
                    label: '同城 '
                }
            ],

            verify_statusList: [
                {
                    value: 0,
                    label: '待审核'
                }, {
                    value: 1,
                    label: '已取消 '
                }, {
                    value: 2,
                    label: '已拒绝 '
                }
            ],
            visible: false,
            loading: false,
            images: [],
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = "/secret/index"
            this.init() //重新请求数据
            console.log("data", this.data)
        },

        start_timeFun(e) {
            console.log(e)
            this.query.start_time = e[0]
            this.query.end_time = e[1]
        },
        loadMoreData(e) {
            if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
                this.page++
                this.init()
            }
        },

        selectFun(val) {
            this.query.bank_name = val
        },

        initReasonForm() {
            this.reasonForm = {
                status: '',
                reason: '',  //理由
            }
        },

        reasonShowFun(id) {
            this.secret_id = id
            this.reasonShow = true
        },

        //下架
        disableFun(status) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.reasonForm.status = 2
            let that = this
            this.$request.put('/secret/update_status/' + that.secret_id, that.reasonForm).then((res) => {
                this.$message.success('操作成功')
                this.submitComplete = false
                that.reasonShow = false
                that.initReasonForm()
                this.init() //重新请求数据
            }).catch((error) => {
                this.submitComplete = false
            });
        },

        toDetails(id) {
            this.$router.push({ path: "/secret-chat-details/?id=" + id });
        },

        passFun(id, status) {
            let that = this
            this.$request.put('/secret/update_examine', { secret_id: id, verify_status: status }).then((res) => {
                this.$message.success('操作成功')
                this.init() //重新请求数据
            })
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
        },

    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.color333 {
    color: #555;
    font-size: 14px;
}

.flex {
    display: flex;
}

.pl-4 {
    font-size: 12px;
}
</style>